<template>
  <a-modal
    v-model:visible="modalData.modalVisible"
    class="chooseStaffModal"
    :centered="true"
    :footer="null"
    :closable="false"
    :destroyOnClose="false"
    :maskClosable="false"
    @cancel="closeModal(false)"
    width="832px"
  >
    <div class="modalBody" v-show="modalData.modalVisible">
      <div class="modalHeader">
        {{ modalData.title }}
        <img src="./images/closeModalImg.svg" alt="关闭" @click="closeModal({ affirm: false })" />
      </div>
      <ChooseCustomerBody
        v-show="modalData.modalVisible"
        @closeModal="closeModal"
        :staffInfoList="modalData.staffInfoList"
        :checkedStaffList="modalData.checkedStaffList"
        :filter="filter"
        :loading="loading"
      />
    </div>
  </a-modal>
</template>

<script>
import { reactive, onMounted, watch } from 'vue'
import ChooseCustomerBody from './ChooseCustomerBody'
export default {
  name: 'ChooseCustomerModal',
  props: {
    visible: {
      //是否显示弹窗
      type: Boolean,
      default: false
    },
    title: {
      //弹窗标题
      type: String,
      default: ''
    },
    staffInfoList: {
      //成员列表
      type: Array,
      default: []
    },
    checkedStaffList: {
      //已选中的成员列表
      type: Array,
      default: []
    },
    filter: {
      //搜索是否使用过滤方法（用全选功能不要使用，会有问题）
      type: Boolean,
      default: false
    },
    loading: {
      //页面是否加载loading
      type: Boolean,
      default: false
    }
  },
  components: {
    ChooseCustomerBody
  },
  setup(props, context) {
    const modalData = reactive({
      modalVisible: false, //弹窗隐藏/显示
      title: '', //弹窗标题
      staffInfoList: [], //成员列表
      checkedStaffList: [] //选中的成员列表
    })

    //关闭弹窗
    const closeModal = res => {
      context.emit('closeModal', res)
    }

    onMounted(() => {
      modalData.modalVisible = props.visible
      modalData.title = props.title
    })

    //监听弹窗显示/隐藏
    watch(
      () => props.visible,
      val => {
        modalData.modalVisible = val
        modalData.title = props.title
        modalData.staffInfoList = props.staffInfoList
        modalData.checkedStaffList = props.checkedStaffList
      },
      {
        immediate: false
      }
    )

    return {
      modalData,
      closeModal
    }
  }
}
</script>

<style lang="less" scoped>
.chooseStaffModal {
  .modalBody {
    padding: 36px 0px 32px;
    .modalHeader {
      position: relative;
      line-height: 28px;
      font-size: 20px;
      color: #000000;
      font-weight: bold;
      padding: 0px 32px;
      margin-bottom: 24px;
      img {
        position: absolute;
        right: 24px;
        width: 28px;
        padding: 2px;
        cursor: pointer;
      }
    }
  }
}
</style>

<style lang="less">
.chooseStaffModal {
  .ant-modal-content {
    border-radius: 16px;
    .ant-modal-body {
      padding: 0px;
    }
  }
}
</style>
